<template>
	<view class="eva">
		<NavBar title="个人评价" bgc="#fff"/>
		<view class="content" v-if="evaList.length">
			<view class="eva-details" v-for="item in evaList" :key="item">
			  <view class="eva-top">
			    <view class="user-info">
			      <image :src="item.avatar" class="avatar"/>
			      <view class="user-name">
			        <view class="name"> {{item.member_name}}</view>
			        <view class="time"> {{item.create_time}} </view>
			      </view>
			    </view>
					<uni-rate :value="item.star" :margin="4" :size="12" activeColor="#F5A623" readonly/>	
			  </view>
			  <view class="eva-info">
			    <view class="text"> {{item.detail}}</view>
			    <view class="img-box" @tap="previewImg(item.img)">
			      <image :src="img"  v-for="img in item.img" :key="img" class="i-img"/>
			    </view>
			    <view class="reply" v-if="item.reply"> {{item.reply}}</view>
			  </view>
			</view>
		</view>
		<Empty txt="这里空空如也~~~" v-else/>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue'
	import Empty from '@/components/Empty.vue'
	import { previewImg } from '@/utils/index.js'
	import { GetMyEvaApi } from '@/service/index.js'
	const evaList = ref([])
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref(0)
	const getMyEvaList = () => {
		GetMyEvaApi().then(res => {
			evaList.value.push(...res.data)
			total.value = res.total
		})
	}
	
	onLoad(() => {
		getMyEvaList()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getMyEvaList()
	})
</script>

<style lang="scss" scoped>
	.eva {
		min-height: 100vh;
		background-color: #fff;
		.content {
			padding: 10px 12px;
			margin-bottom: 10px;
			.eva-details {
				margin-bottom: 10px;
			  padding-bottom: 10px;
			  border-bottom: 1px solid #E6E6E6;
			  .eva-top {
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			    .user-info {
			      display: flex;
			      .avatar {
			        width: 32px;
			        height: 32px;
			        margin-right: 10px;
							border-radius: 50%;
			      }
			      .name {
			        font-weight: 500;
			        font-size: 14px;
			        color: #666666;
			        line-height: 17px;
			      }
			      .time {
			        font-weight: 400;
			        font-size: 12px;
			        color: #999999;
			        line-height: 16px;
			      }
			    }
			  }
			  .eva-info {
			    margin-top: 10px;
			    .text {
			      font-weight: 400;
			      font-size: 14px;
			      color: #666666;
			      line-height: 19px;
			    }
			    .img-box {
			      margin: 10px 0;
			      display: grid;
			      grid-template-columns: repeat(3, 1fr); /* 创建5列 */
			      gap: 9px; /* 如果需要间距，可以设置为非零值 */
			      box-sizing: border-box; /* 确保内边距不会增加容器大小 */
			      .i-img {
			        width: 109px;
			        height: 109px;
							border-radius: 10px;
			      }
			    }
			    .reply {
						color: #999999;
						font-size: 14px;
						font-weight: 400;
						line-height: 19px;
			      padding: 6px 10px;
			      background: #F4F4F4;
			      border-radius: 5px 5px 5px 5px;
			    }
			  }
			}
		}
	}
</style>
